import styled from "styled-components";

const MyWrapper = styled.div`
      h1{
        position: sticky;
        top: 0;
        display: block;
        z-index:999;
        height:.44rem;
        line-height:.44rem;
        font-size: .16rem;
        font-weight: normal;
        text-align: center;
        background-color: #F8F8F8;
    }
    .userinfo{
        padding: .3rem .3rem;
        display: flex;
        .loginactive{
            display: block;
        }
        .loginout{
            display: none;
        }
        .login{
                font-size: .18rem;
                line-height: .5rem;
            }
        .u_img{
            img{
            width: .5rem;
            height: .5rem;
            border-radius: .5rem;
           
            }
        }
        .u_info{
            margin-left: .2rem;
            display: flex;
            flex-direction: column;
            .username{
            font-size: .19rem;
            }
            .info{
                color: #eee;
                margin-top: .05rem;
            }
        }
    }
    .myBuy{
        ul{
            display: flex;
            flex-direction: column;
            li{
                padding: .1rem .2rem;
                border-bottom: 1px solid #eee;
                span{
                    margin-left: .1rem;
                    font-size: .16rem;
                }
                .right{
                    /* position: absolute;
                    right: .1rem; */
                    float: right;
                    img{
                        width:.15rem;
                        height:.15rem;
                    }
                }
                img{
                    width:.3rem;
                    height:.3rem;
                }
                p{
                    display: flex;
                    justify-content: space-between;
                    font-size: .16rem;
                    .order{
                        font-size: .12rem;
                    }
                }
                .li1{
                    padding: .2rem .3rem;
                    div{
                        display: flex;
                        justify-content: space-between;
                        div{
                            display: flex;
                            flex-direction: column;
                            img{
                                margin-left: .05rem;
                            }
                            p{
                                font-size: .13rem;
                                margin-top: .05rem;
                            }
                        }
                    }
                }
            }
        }
    }
    .line{
        width: 100%;
        background-color: #F5F5F9;
        height: .1rem;
    }
    .logout{
        padding: .2rem 0;
        text-align: center;
        font-size: .16rem;
    }
    .active{
        background-color: red;
    }

    .am-list-item{
        border-bottom: 1px solid #eee;
    }

    .myBuy{
        border-bottom: 1px solid #eee;
        padding: .1rem .1rem;
        img{
            width: .2rem;
            height: .2rem;
        }
        p{
            display: flex;
            justify-content: space-between;
            font-size: .16rem;
            .order{
                font-size: .12rem;
                }
            span{
                margin-left: .1rem;
                font-size: .16rem;
                }
         }
         .li1{
            padding: .2rem .3rem;
            div{
                display: flex;
                justify-content: space-between;
                div{
                    display: flex;
                    flex-direction: column;
                    img{
                        margin-left: .05rem;
                    }
                    p{
                        font-size: .13rem;
                        margin-top: .05rem;
                    }
                }
            }
         }
       
    }
`
const LoginWrapper = styled.div`
background-color: white;
height: 100%;
text-align: center;
.top{
    padding: .1rem .2rem;
    text-align: center;
    background-color: white;
    height: .5rem;
    .nav{
        position: absolute;
        top: .6rem;
        left: .1rem;
        margin: 0;
        width: 1rem;
        border: 1px #eee solid;
        padding:.06rem .15rem ;
        border-radius: .3rem;
        li{
            float:left;
            padding-right:.05rem;
            img{
                width: .15rem;
                height: .15rem;
            }
            
        }
    }
    span{
        line-height: .4rem;
        font-size: .18rem;
    }
}
.dw{
    margin-top: 1rem;
    img{
        width: 100%;
    }
}
.login{
    text-align: center;
    p{
        button{
        width: 3rem;
        margin-top: .15rem;
        height: .5rem;
        color: #fff;
        font-size: .18rem;
        }  
        .wechat{
            border: none;
            background-color: #01C2C3;
        }
        .phone{
            border: 1px solid #C7C7D7;
            background-color: white;
            color: #626774;
        }
    }

}
`

const PhoneWrapper = styled.div`
background-color: white;
height: 100%;
text-align: center;
    .aaa{
       margin-top: 1rem;
       .login{
           padding: .2rem;
            div{
                border-bottom: 1px solid #eee;
                margin: 0 auto;
                input{
                    border: none;
                    height: .5rem;
                    margin-left: .15rem;
                }
                #phone{
                    margin-left: .3rem;
                }
            }
            p{
                 margin-top: .2rem;
                 button{
                     color: #fff;
                     background-color:#01C2C3 ;
                     border: none;
                     height: .4rem;
                     width: 2.5rem;
                 }
            }
        }
    }
    
`
const CartWrapper = styled.div`
 ul{
    
    li{
        display: flex;
        margin-top: .12rem;
    .cart{
    img{
        width: 1rem;
        height: 1rem;
        }
    }
    }
    
}
 
`

const AddresWrapper=styled.div`
.addres{
    padding: .15rem ;
    background-color: white;
    ul{
        li{
            .p1{
                display: flex;
                justify-content: space-between;
                font-size: .17rem;
            }
            .p2{
                margin-top: .06rem;
                font-size: .17rem;

            }
        }
    }
}
`
export {
    MyWrapper,
    LoginWrapper,
    PhoneWrapper,
    CartWrapper,
    AddresWrapper
}